<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>创建新接口</title>
  <link rel="stylesheet" href="../../libs/element-ui@2.12.0.css" />
  <link rel="stylesheet" href="./index.css" />
  <style>
    div[v-cloak] {
      display: none;
    }
  </style>
</head>
<body>
  <div id="root" v-cloak>
    <el-form ref="form" :model="form" label-position="top">
      <el-form-item label="接口名称">
        <el-input v-model="form.name" size="small"></el-input>
      </el-form-item>
      <el-form-item label="URL">
        <el-input v-model="form.url" size="small"></el-input>
      </el-form-item>
      <el-form-item label="请求类型">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="GET" name="type"></el-checkbox>
          <el-checkbox label="POST" name="type"></el-checkbox>
          <el-checkbox label="PUT" name="type"></el-checkbox>
          <el-checkbox label="DELETE" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item style="text-align: center;">
        <el-button type="primary" @click="onSubmit" size="small">立即创建</el-button>
        <el-button size="small" @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>

<script src="../../libs/vue@2.6.10.js"></script>
<script src="../../libs/element-ui@2.12.0.js"></script>
<script src="./index.js"></script>
</body>
</html>
